<template>
	<view v-if="info.status == 1">
		
		<!-- 悬浮按钮 - 音乐 -->
		<image class='music' :class="musicRotate == 1 ? 'rotate' : ''" src="/static/music.png" @click="music"></image>
	
		<!-- 悬浮按钮 - 弹幕 -->
		<image v-if="isEnd == 0"  class='barrage' :class="barrageRotate == 1 ? 'rotate' : ''" src="/static/barrage.png" @click="barrage"></image>
		<lff-barrage v-if="isEnd == 0" ref="lffBarrage" style="z-index: 999; position: absolute;" :style="barrageRotate == 0 ? 'display: none;' : ''"></lff-barrage>
		
		<!-- 悬浮按钮 - 推荐 -->
		<view v-if="isEnd == 0" class="recom" @click="showPoster">
			<image style="width: 80rpx; height: 80rpx" src="/static/share.png"></image>
			<view style="font-size: 24rpx">分享海报</view>
		</view>
		
		<!-- 悬浮按钮 - 后台 -->
		<view v-if="userRole == 1" class="admin" @click="showAdminPage">
			<image style="width: 80rpx; height: 80rpx" src="/static/admin.png"></image>
			<view style="font-size: 24rpx">我的后台</view>
		</view>
		
		<view>
			<image :src="info.activity_head_image" mode="widthFix" style="width: 100%;"></image>
		</view>
		
		<!-- 倒计时 -->
		<view class="date_view" :style="{ backgroundColor: info.custom.countdown_bgcolor }">
			<view class="title_view">
				<view class="icon">
					<image src="/static/time.png" class="image_icon"></image>
				</view>
				<view class="title">
					距离结束时间
				</view>
			</view>
			<view class="date_view2">
				<view class="date">
					<view>
						<view class="text">天</view>
						<view class="number">{{countDownDay}}</view>
					</view>
				</view>
				<view class="date">
					<view>
						<view class="text">时</view>
						<view class="number">{{countDownHour}}</view>
					</view>
				</view>
				<view class="date">
					<view>
						<view class="text">分</view>
						<view class="number">{{countDownMinute}}</view>
					</view>
				</view>
				<view class="date">
					<view>
						<view class="text">秒</view>
						<view class="number">{{countDownSecond}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 数据概览 -->
		<view class="index_view">
			<view class="index_view2">
				<view class="view">
					<view class="icon">
						<image src="/static/user_icon.png"></image>
					</view>
					<view class="index_data">
						<view class="number">{{info.activity_virtual_join + info.join_num}}</view>
						<view class="text">参与量</view>
					</view>
				</view>
				<view class="view">
					<view class="icon">
						<image src="/static/view_icon.png"></image>
					</view>
					<view class="index_data">
						<view class="number">{{info.activity_virtual_visitor + info.visitor_num}}</view>
						<view class="text">浏览量</view>
					</view>
				</view>
				<view class="view">
					<view class="icon">
						<image src="/static/share_icon.png"></image>
					</view>
					<view class="index_data">
						<view class="number">{{info.activity_virtual_share + info.share_num}}</view>
						<view class="text">分享量</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isEnd == 0" class="user_view">
			<view class="user_view2" :style="{
				animation: (info.activity_visitor.length <= 10) ? 'none' : 'userScroll ' + ((info.activity_visitor.length / 10) * 5) +'s linear infinite'
			}">
				<view class="avatar" v-for="item in info.activity_visitor" v-bind:key="item.id">
					<view><image :src="item.avatar_url"></image></view>
				  <text class="text">{{item.nickname}}</text>
				</view>
			</view>
		</view>
		
		<!-- 平台盲盒 -->
		<view class="box_view" v-if="info.platform_box_is_join == 1 || isEnd == 0">
			<view class="title_view">
				<view class="icon">
					<image src="/static/box_icon.png" class="image_icon"></image>
				</view>
				<view class="title">
					幸运盲盒
				</view>
			</view>
			<view class="other_view">
				<image src="/static/prizeDraw/platformBox/background.png" mode="widthFix"></image>
				<text class="number_button_text">{{info.box_draw_num}}次</text>
				<!-- 按钮 -->
				<text class="active_button" @click="ruleView"></text>
				<text class="prize_draw_button" @click="drawPrize"></text>
				<navigator url="/pages/user/center/platformPrize"><text class="prize_list_button"></text></navigator>
				<!-- 列表 -->
				<view class="product_view">
					<div class="auto-scroll-container">
						<div class="scroll-content">					
							<view class="product" v-for="item in info.box_prize" v-bind:key="item.id">
								<navigator :url="'/pages/activity/productInfo?id=' + item.id">
									<view>
										<image :src="item.image"></image>
									</view>
									<text class="text">{{item.name}}</text>
								</navigator>
							</view>
						</div>
					</div>					
				</view>
			</view>
		</view>
		
		<!-- 平台盲盒活动规则 -->
		<uv-popup ref="ruleView" :close-on-click-overlay="false">
			<view class="uv-popup popup">
				<view class="popup-title">活动规则</view>
				<view class="popup-content">{{info.box.rule_content}}</view>
				<view><image class='popup-close' src="/static/close.png" @click="closeRuleView"></image></view>
			</view>
		</uv-popup>
		
		<!-- 平台盲盒中奖弹窗 -->
		<view class="win-prize_view" @click="winPrizeReceive" v-if="showWinPrizePop">
			<view class="image_row">
				<image mode="widthFix" style="width: 100%;" src="/static/prizeDraw/platformBox/openView.png"></image>
				<view class="text_row">
					<view class="tip" v-if="showWinIsPrize">恭喜你，抽中了<br />{{showWinPrizeText}}</view>
					<view class="tip" v-if="!showWinIsPrize">{{showWinPrizeText}}</view>
				</view>
			</view>
		</view>
		
		<!-- 翻牌抽奖弹窗 -->
		<view class="draw_prize_tip_view" v-if="showActivityDrawPrizePop">
			<view class="image_row">
				<image mode="widthFix" style="width: 100%;" src="/static/prizeDraw/activity/drawPrizePop.png"></image>
				<!-- 按钮 -->
				<text class="cancel_button" @click="cancelActivityDrawPrizePop"></text>
				<text class="draw_prize_button" @click="activityDrawPrize"></text>
			</view>
		</view>
		
		<!-- 活动详情介绍 -->
		<view class="info_view">
			<view class="title_view">
				<view class="icon">
					<image src="/static/info_icon.png" class="image_icon"></image>
				</view>
				<view class="title">
					活动详情介绍
				</view>
			</view>
			<view>
				<image :src="info.activity_detail_image" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		
		<!-- 商家信息 -->
		<view class="staff_view">
			<view class="title_view">
				<view class="icon">
					<image src="/static/staff_icon.png" class="image_icon"></image>
				</view>
				<view class="title">
					商家信息
				</view>
			</view>
			<view class="staff_view2">
				<view class="staff_view3">
					<view class="icon">
						<image src="/static/shop_icon.png" style="width: 150rpx; height: 150rpx;"></image>
					</view>
					<view class="data">
						<view class="text1">{{info.seller_name}}</view>
						<view class="text2">{{info.seller_address}}</view>
					</view>
					<view class="button_view">
						<view class="map_button" @click="navigation">一键导航</view>
						<view class="phone_button" @click="sellerPhone">联系商家</view>
					</view>
				</view>
				<view class="image">
					<image :src="info.seller_shop_image" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			
		</view>

		<!-- 底部按钮 -->
		<view class="bottom_button">
			<navigator :url="'/pages/user/center/index?activityId=' + pageOption.activityId">
				<!-- 个人中心 -->
				<view class="button_view" style="width: 40%;">
					<view class="my_button" :style="{ backgroundColor: info.custom.my_botton_color }">{{info.custom.my_botton_name}}</view>
				</view>
			</navigator>
			<view class="button_view" style="width: 60%;" v-if="info.order.order_status != 2 && isEnd == 0">
				<!-- 立即购买 -->
				<button class="buy_button" :style="{ backgroundColor: info.custom.buy_botton_color }" @click="buy">
					￥{{info.activity_present_price}} {{info.custom.buy_botton_name}}
				</button>
			</view>
			<view class="button_view" style="width: 60%;" v-else-if="isEnd == 0">
				<!-- 立即分享 -->
				<button class="buy_button" :style="{ backgroundColor: info.custom.share_botton_color }" open-type="share">{{info.custom.share_botton_name}}</button>
			</view>
			<view class="button_view" style="width: 60%;" v-if="isEnd == 1">
				<!-- 活动结束 -->
				<button class="buy_button" :style="{ backgroundColor: info.custom.buy_botton_color }">{{endMessage}}</button>
			</view>
		</view>
		
		<!-- 海报 -->
		<view class="cu-modal" :class="poster.show == true ? 'show' : ''">
			<view class="cu-dialog" v-if="poster.show">
				<cc-poster
					:imgSrc="info.poster_image"
					:QrSrc="poster.qrcodeUrl"
					:Referrer="poster.referrer"
					:LineType="false">
				</cc-poster>
				<image class="close" src="/static/close.png" @click="closePoster"></image>
			</view>
		</view>
		
		<!-- 填写联系方式 -->
		<uv-popup ref="popup" :close-on-click-overlay="false">
			<view class="uv-popup popup">
				<view class="popup-title">填写联系方式</view>
				<view class="popup-content">
					<form @submit="formSubmit">
						<view class="form" v-if="fillInfo.name == 'name'">
							<text>姓名</text>
							<input class="form-input" name="name" />
						</view>
						<view class="form" v-if="fillInfo.phone == 'phone'">
							<text>手机号</text>
							<input class="form-input" name="phone" />
						</view>
						<view class="form" v-if="fillInfo.customer_type == 'customer_type'">
							<text>类型</text>
							<picker class="form-input" name="customer_type" :value="customerTypeIndex" :range="customerType" @change="customerTypeChange">
								<view class="picker">
									{{customerType[customerTypeIndex]}}
								</view>
							</picker>
						</view>
						<view class="submit">
							<button form-type="submit">提交信息</button>
						</view>
					</form>
				</view>
				<image class="close" src="/static/close.png" @click="closePopup" style="position: absolute; top: 0; right: 0; transform: translate(20%, -150%);"></image>
			</view>
			
		</uv-popup>

	</view>
</template>

<script>
	import * as api from '@/api/activity'
	import * as userApi from '@/api/user'
	import * as loginApi from '@/api/login'
	import config from '@/config'
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	import * as app from '@/utils/app'
	import storage from '@/utils/storage'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				// 滚动秒数
				rollSec: 20,
				// 页面加载状态
				loadStatus: 0,
				// 页面数据
				pageOption: {},
				// 音乐图标旋转状态
				musicRotate: 1,
				// 弹幕图标旋转状态
				barrageRotate: 1,
				// 结束倒计时
				countDownDay: '00',
				countDownHour: '00',
				countDownMinute: '00',
				countDownSecond: '00',
				// 海报数据
				poster: {
					show: false,
					qrcodeUrl: '',
					referrer: '',
				},
				// 活动数据
				info: {},
				// 音乐播放器
				audioCtx: null,
				// 中奖弹窗
				showWinPrizePop: false,
				// 抽奖弹窗
				showActivityDrawPrizePop: false,
				// 中奖弹窗文本
				showWinPrizeText: '',
				// 是否为奖品
				showWinIsPrize: false,
				// 当前用户 ID
				userId: 0,
				// 活动是否已结束
				isEnd: 0,
				// 结束信息
				endMessage: '',
				// 需填写的信息
				fillInfo: {},
				// 客户类型
				customerType: ['新客', '老客'],
				customerTypeIndex: 0,
				// 用户角色
				userRole: 0,
			}
		},
		onShow() {
			// 自动登录
			var that = this;
			if (storage.get('authToken') == false) {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						loginApi.wxLogin({
							"wxcode": loginRes.code
						}).then(res => {
							// 保存tokne，过期时间30天
							storage.set('authToken', res.data.token, 30 * 86400)
							// 加载数据
							that.getInfo();
						});
					}
				});
			} else {
				this.getInfo();
			}

			if (this.audioCtx != null && this.musicRotate == 1) {
				this.audioCtx.play()
			}
		},
		onHide() {
			if (this.audioCtx != null) {
				this.audioCtx.pause()
			}
		},
		onUnload() {
			if (this.audioCtx != null) {
				this.audioCtx.pause()
			}
		},
		onLoad(option) {
			if (typeof option.scene === 'string') {
				this.pageOption = app.parseScene(option.scene);
			} else {
				this.pageOption = option;
			}
			
			// 保存当前活动数据
			console.log('activityId =', this.pageOption.activityId ?? '')
			console.log('recomUserId =', this.pageOption.recomUserId ?? '')
			storage.set('activityId', this.pageOption.activityId ?? '', 366 * 86400);
			storage.set('recomUserId', this.pageOption.recomUserId ?? '', 366 * 86400);
			
			var that = this;
			setInterval(() => {
				// 弹幕
				if (this.isEnd == 0) {
					if (typeof that.info.activity_visitor !== 'undefined' && typeof that.$refs.lffBarrage !== 'undefined') {
						that.$refs.lffBarrage.add({item: that.getRandomItem(that.info.activity_visitor)});
					}
				}
			}, 1000);
			
			// 开启分享功能
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		methods: {
			// 获取活动数据
			getInfo () {
				var that = this;		
				// 获取活动数据
				api.getInfo({
					'activityId': that.pageOption.activityId ?? '',
					'recomUserId': that.pageOption.recomUserId ?? '',
				}).then(res => {
					that.fillInfo = JSON.parse(res.data.draw_prize_fill_info);
					// 判断活动是否开放
					if (res.data.status == 1) {
						// 判断活动是否开始
						console.log('time', (Date.parse(new Date()) / 1000));
						console.log('activity_start_time', (Date.parse(res.data.activity_start_time.replace(/-/g, "/")) / 1000));
						console.log('activity_end_time', (Date.parse(res.data.activity_end_time.replace(/-/g, "/")) / 1000));
						if ((Date.parse(res.data.activity_start_time.replace(/-/g, "/")) / 1000) > (Date.parse(new Date()) / 1000)) {
							// uni.showToast({ title: '活动尚未开始', icon: 'error', duration: 3000 });
							uni.redirectTo({ url: '/pages/user/center/index?activityId=' + that.pageOption.activityId });
						} else {
							// 获取数据
							that.info = res.data;
							// 判断活动是否已结束
							if ((Date.parse(res.data.activity_end_time.replace(/-/g, "/")) / 1000) <= (Date.parse(new Date()) / 1000)) {
								that.isEnd = 1;
								that.endMessage = '活动已结束';
							} else {
								// 判断翻牌抽奖资格
								if (that.loadStatus == 0 && res.data.activity_draw_num > 0) {
									that.showActivityDrawPrizePop = true;
								}
							}
							if (that.loadStatus == 0) {
								// 倒计时
								that.countdown((Date.parse(res.data.activity_end_time.replace(/-/g, "/")) / 1000));
								// 初始化音乐播放器
								that._initMusic(res.data.activity_music);
								// 海报
								userApi.dashboard({
									activityId: that.pageOption.activityId
								}).then(res => {
									// 获取当前用户 ID
									that.userId = res.data.id;
									// 获取用户角色
									that.userRole = res.data.role;
									// 获取推广二维码
									that.poster.qrcodeUrl =  config.apiUrl + 'activity/wxappQrcode' + 
										'?page=pages/activity/index' +
										'&scene=' + 'activityId=' + that.pageOption.activityId + '%26recomUserId=' + res.data.id
									// 海报推荐人
									if (that.info.order.name) {
										that.poster.referrer = that.info.order.name + ' 推荐';
									} else {
										that.poster.referrer = res.data.nickname + ' 推荐';
									}
								});
							}
							// 赋予状态
							that.loadStatus = 1;
						}
					} else {
						// uni.showToast({ title: '活动不存在', icon: 'error', duration: 3000 });
						uni.redirectTo({ url: '/pages/user/center/index?activityId=' + that.pageOption.activityId });
					}
				});
			},
			// 从数组中随机获取一条数据
			getRandomItem: function (arr) {
				let randomIndex = Math.floor(Math.random() * arr.length);
				return arr[randomIndex];
			},
			// 初始化播放器
			_initMusic: function (newVal) {
				// 当页面传来新的music时，先销毁之前的audioCtx，否则页面会很嗨
				if (this.audioCtx) {
					this.audioCtx.destroy()
				}
				if (newVal != '') {
					this.audioCtx = uni.createInnerAudioContext();
					this.audioCtx.autoplay = true
					this.audioCtx.loop = true
					this.audioCtx.src = newVal
				}
			},
			// 音乐开关
			music: function () {
				if (this.musicRotate == 1) {
					this.musicRotate = 0;
					this.audioCtx.pause()
				} else {
					this.musicRotate = 1;
					this.audioCtx.play()
				}
			},
			// 弹幕开关
			barrage: function () {
				if (this.barrageRotate == 1) {
					this.barrageRotate = 0;
				} else {
					this.barrageRotate = 1;
				}
			},
			// 一键导航
			navigation: function(event) {
				uni.openLocation({
					latitude: parseFloat(this.info.seller_latitude),
					longitude: parseFloat(this.info.seller_longitude),
					name: this.info.seller_name,
					address: this.info.seller_address
				})
			},
			// 平台盲盒规则
			ruleView: function () {
				this.$refs.ruleView.open();
			},
			closeRuleView: function () {
				this.$refs.ruleView.close();
			},
			// 平台盲盒抽奖
			drawPrize: function () {
				var that = this;
				api.platformBoxPrizeDraw({
					'activityId': that.pageOption.activityId ?? ''
				}).then(res => {
					if (res.code == 200) {
						// 写入中奖信息
						that.showWinPrizePop = true;
						that.showWinPrizeText = res.data.prizeName;
						that.showWinIsPrize = res.data.isPrize;
						// 获取剩余中奖次数
						that.info.box_draw_num = res.data.darwNum;
					}
				});
			},
			// 平台盲盒领奖
			winPrizeReceive: function() {
				this.showWinPrizePop = false;
			},
			// 关闭翻牌抽奖提示弹窗
			cancelActivityDrawPrizePop: function () {
				this.showActivityDrawPrizePop = false;
			},
			// 跳转翻牌抽奖页面
			activityDrawPrize: function () {
				this.showActivityDrawPrizePop = false;
				uni.navigateTo({ url: '/pages/activity/prizeDraw?activityId=' + this.pageOption.activityId });
			},
			// 跳转我的后台
			showAdminPage() {
				if (this.userRole == 1) {
					// 进入商家后台
					uni.navigateTo({ url: '/pages/staff/index'});
				} else if (this.userRole == 2) {
					// 进入店员后台
					uni.navigateTo({ url: '/pages/clerk/index'});
				}
			},
			// 分享海报
			showPoster() {
				this.poster.show = true;
				uni.showLoading({
					title: '海报生成中...'
				});
				// 增加分享量
				api.addShareNum({'activityId': this.pageOption.activityId ?? ''});
			},
			// 关闭海报
			closePoster() {
				this.poster.show = false;
			},
			// 关闭弹窗
			closePopup() {
				this.$refs.popup.close();
			},
			// 商家电话
			sellerPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.seller_phone,
				})
			},
			// 倒计时
			countdown: function(endTime) {
				var that = this;
				var totalSecond = endTime - Date.parse(new Date())/1000;
				var interval = setInterval(function () {
					// 秒数
					var second = totalSecond;
					// 天数位
					var day = Math.floor(second / 3600 / 24);
					var dayStr = day.toString();
					if (dayStr.length == 1) dayStr = '0' + dayStr;
					// 小时位
					var hr = Math.floor((second - day * 3600 * 24) / 3600);
					var hrStr = hr.toString();
					if (hrStr.length == 1) hrStr = '0' + hrStr;
					// 分钟位
					var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
					var minStr = min.toString();
					if (minStr.length == 1) minStr = '0' + minStr;
					// 秒位
					var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
					var secStr = sec.toString();
					if (secStr.length == 1) secStr = '0' + secStr;
					that.countDownDay = dayStr;
					that.countDownHour = hrStr;
					that.countDownMinute = minStr;
					that.countDownSecond = secStr;
	
					totalSecond--;
					if (totalSecond < 0) {
						clearInterval(interval);
						that.countDownDay = '00';
						that.countDownHour = '00';
						that.countDownMinute = '00';
						that.countDownSecond = '00';
					}
				}.bind(that), 1000);
			},
			// 拨打电话
			callPhone(event) {
				uni.makePhoneCall({phoneNumber: event.currentTarget.dataset.phone})
			},
			// 监听分享事件
			onShareAppMessage: function() {
				// 增加分享量
				api.addShareNum({'activityId': this.pageOption.activityId ?? ''});
				return {
					title: this.info.share_title,
					imageUrl: this.info.share_image,
					path: 'pages/activity/index?activityId=' + this.pageOption.activityId + '&recomUserId=' + this.userId,
				}
			},
			// 购买
			buy() {
				if (this.fillInfo.name == 'name' && (this.info.order.name == null || this.info.order.name == '')) {
					this.$refs.popup.open();
				} else if (this.fillInfo.name == 'phone' && (this.info.order.phone == null || this.info.order.phone == '')) {
					this.$refs.popup.open();
				} else if (this.fillInfo.name == 'customer_type' && (this.info.order.customer_type == null || this.info.order.customer_type == '')) {
					this.$refs.popup.open();
				} else {
					this.payment();
				}
			},
			// 提交表单
			formSubmit: function (form) {
				var value = form.detail.value;
				if (typeof value.name == 'string' && value.name == '') {
					uni.showToast({ title: '请填写姓名', icon: 'error', duration: 3000 });
				} else if (typeof value.phone == 'string' && value.phone == '') {
					uni.showToast({ title: '请填写手机号', icon: 'error', duration: 3000 });
				} else if (typeof value.customer_type == 'string' && value.customer_type == '') {
					uni.showToast({ title: '请选择类型', icon: 'error', duration: 3000 });
				} else {
					var that = this;
					api.submitDrawInfo({
						'activityId': that.pageOption.activityId ?? '',
						'data': form.detail.value
					}).then(res => {
						that.$refs.popup.close();
						that.payment();
					})
				}
			},
			// 支付订单
			payment() {
				var that = this;
				api.payment({
					'activityId': that.pageOption.activityId ?? ''
				}).then(res => {
					wx.requestPayment({
						'timeStamp': res.data.timeStamp,
						'nonceStr': res.data.nonceStr,
						'package': res.data.package,
						'signType': res.data.signType,
						'paySign': res.data.paySign,
						success(res) {
							if (res.errMsg == "requestPayment:ok") {
								that.getInfo();
								uni.showToast({ title: '支付成功', icon: 'success', duration: 3000 });
							}
							console.log(res)
						},
						fail(res) {
							uni.showToast({ title: '支付失败', icon: 'error', duration: 3000 });
						}
					});
				});
			},
			// 客户类型选择
			customerTypeChange: function(e) {
				this.customerTypeIndex = e.detail.value;
			},
		},
		mounted() {
			
		}
	}
</script>

<style>
	/* 填写联系方式 */
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		border-radius: 6rpx;
		padding: 10rpx;
		width: 25%;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.popup-title {
		font-size: 30rpx;
		padding-bottom: 10rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.popup-title::after {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 15rpx;
		height: 1.5rpx;
		background: #FB960E;
		border-radius: 1rpx;
	}
	.popup-content {
		white-space: pre-wrap;
		line-height: 1.6;
		font-size: 1em;
		margin-bottom: 6px;
	}
	.popup-content .form {
		padding: 5rpx 0;
		margin-bottom: 6rpx;
		position: relative;
	}
	.popup-content .form > text {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 3rpx;
		display: block;
	}
	/* 表单输入框统一样式 */
	.form-input {
		border: 1rpx solid #ddd;
		padding: 0 8rpx;
		height: 32rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		color: #333;
		transition: all 0.3s ease;
	}
	.picker {
		height: 32rpx;
		line-height: 32rpx;
		position: relative;
	}
	.popup-content .submit {
		margin-top: 30rpx;
	}
	.popup-content .submit > button {
		font-size: 28rpx;
		background: linear-gradient(45deg, #FB960E, #FFB74D);
		color: #fff;
		border-radius: 16rpx;
		padding: 6rpx 0;
		width: 100%;
		border: none;
		box-shadow: 0 2rpx 5rpx rgba(251, 150, 14, 0.2);
	}
	
	/* 翻牌抽奖弹窗 */
	.draw_prize_tip_view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}
	.draw_prize_tip_view > .image_row {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 80%;
	}
	.draw_prize_tip_view > .image_row > .cancel_button {
		position: absolute;
		top: 90%;
		left: 25%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 170rpx;
		height: 90rpx;
	}
	.draw_prize_tip_view > .image_row > .draw_prize_button {
		position: absolute;
		top: 90%;
		left: 75%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 170rpx;
		height: 90rpx;
	}
	
	/* 平台盲盒中奖弹窗 */
	.win-prize_view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}
	.win-prize_view > .image_row{
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 80%;
	}
	.win-prize_view > .image_row > .text_row {
		position: absolute;
		left: 0;
		right: 0;
		top: 250rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.win-prize_view > .image_row > .text_row > .tip {
		text-align: center;
		margin: 0rpx 100rpx 0rpx 100rpx;
		color: #C37B50;
		font-size: 50rpx;
	}
	
	/* 平台盲盒活动规则 */
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 20px;
		width: 80%;
	}
	.popup .popup-title {
		font-size: 40rpx;
		padding-bottom: 30rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
	}
	.popup .popup-close {
		top: -60rpx;
		right: 0;
		position: fixed;
		width: 50rpx;
		height: 50rpx;
	}
	.popup .popup-content {
		white-space: pre-wrap;
		line-height: 1.6;
		font-size: 1em;
		margin-bottom: 20px;
	}
	
	/* 悬浮关闭按钮 */
	.close {
		width: 50rpx;
		height: 50rpx;
		position: fixed;
		transform: translate(-50%, 30%);
	}
	
	/* 海报 */
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}
	
	/* 底部按钮 */
	.bottom_button {
		position: fixed;
		left: 0;
		bottom: 0;
		display: block;
		text-align: center;
		width: 100%;
		background: #fff;
		z-index: 999;
	}
	.bottom_button .button_view {
		float: left;
	}
	.bottom_button .button_view > .buy_button {
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		margin: 20rpx;
		height: 80rpx;
	}
	.bottom_button .button_view > .my_button {
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx;
		margin: 20rpx;
	}
	
	/* 商家信息 */
	.staff_view {
		position: relative;
		display: block;
		height: 150rpx;
	}
	.staff_view > .title_view {
		background-color: #F9F9F7;
		padding: 40rpx 0rpx 40rpx 30rpx;
	}
	.staff_view > .title_view > .icon {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.staff_view > .title_view > .title {
		display: block;
		font-weight: bold;
	}
	.staff_view > .staff_view2 {
		padding-top: 30rpx;
		padding-bottom: 120rpx;
	}
	.staff_view > .staff_view2 > .staff_view3 {
		margin: auto;
		width: 90%;
	}
	.staff_view > .staff_view2 > .staff_view3 > .icon {
		display: block;
		float: left;
		padding-right: 20rpx;
	}
	.staff_view > .staff_view2 > .staff_view3 > .data {
		display: block;
	}
	.staff_view > .staff_view2 > .staff_view3 > .data > .text1 {
		padding-top: 5rpx;
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.staff_view > .staff_view2 > .staff_view3 > .data > .text2 {
		padding-top: 10rpx;
		font-size: 30rpx;
	}
	.staff_view > .staff_view2 > .staff_view3 > .button_view {
		display: flex;
		text-align: center;
		width: 100%;
		background: #fff;
	}
	.staff_view > .staff_view2 > .staff_view3 > .button_view > .map_button {
		width: 50%;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		background-color: #503E9D;
		padding: 20rpx;
		margin: 10rpx 10rpx 10rpx 0rpx;
	}
	.staff_view > .staff_view2 > .staff_view3 > .button_view > .phone_button {
		width: 50%;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		background-color: #EFEEF7;
		color: #655DB0;
		padding: 20rpx;
		margin: 10rpx 0rpx 10rpx 10rpx;
	}
	.staff_view > .staff_view2 > .image {
		padding-top: 20rpx;
	}
	
	/* 活动详情介绍 */
	.info_view > .title_view {
		background-color: #F9F9F7;
		padding: 40rpx 0rpx 40rpx 30rpx;
	}
	.info_view > .title_view > .icon {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.info_view > .title_view > .title {
		display: block;
		font-weight: bold;
	}
	
	/* 平台盲盒 */
	.box_view > .title_view {
		background-color: #F9F9F7;
		padding: 40rpx 0rpx 40rpx 30rpx;
	}
	.box_view > .title_view > .icon {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.box_view > .title_view > .title {
		display: block;
		font-weight: bold;
	}
	.box_view > .other_view {
		position: relative;
	}
	.box_view > .other_view > image {
		width: 100%;
	}
	.box_view > .other_view > .number_button_text{
		position: absolute;
		top: 68%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
	}
	.box_view > .other_view .active_button {
		position: absolute;
		top: 72%;
		left: 19%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 170rpx;
		height: 90rpx;
	}
	.box_view > .other_view .prize_draw_button {
		position: absolute;
		top: 70.49%;
		left: 49.9%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 250rpx;
		height: 120rpx;
	}
	.box_view > .other_view .prize_list_button {
		position: absolute;
		top: 72%;
		left: 80.5%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 170rpx;
		height: 90rpx;
	}
	.box_view > .other_view > .product_view {
		position: absolute;
		top: 87.7%;
		left: 53.2%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 30rpx;
		z-index: 1;
		width: 659rpx;
		height: 148rpx;
	}
	.auto-scroll-container {
		width: 100%;
		overflow: auto;
		white-space: nowrap;
	}
	/* .scroll-content {
	  display: inline-block;
	  animation: autoScroll 20s linear infinite;
	}
	@keyframes autoScroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	} */
	.box_view > .other_view > .product_view .product {
		padding-top: 10rpx;
		line-height: 30rpx;
		text-align: center;
		width: 130rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
	}
	.box_view > .other_view > .product_view .product image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx
	}
	.box_view > .other_view > .product_view .product text {
		font-size: 15rpx;
	}
	
	/* 参与人员 */
	.user_view {
		height: 350rpx;
		overflow: hidden;
		position: relative;
		padding: 15rpx;
		background-color: #FDFAFA;
		text-align: center;
	}
	.user_view > .user_view2 {
		width: 100%;
		float: initial;
		display: inline-block;
	}
	.user_view > .user_view2 > .avatar {
		padding-top: 20rpx;
		float: left;
		width: 20%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.user_view > .user_view2 image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 90rpx
	}
	.user_view > .user_view2 text {
		font-size: 25rpx
	}

	@keyframes userScroll {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-50%);
		}
	}
	
	/* 数据概览 */
	.index_view {
		position: relative;
		display: block;
		height: 150rpx;
	}
	.index_view2 {
		width: 90%;
		margin: auto;
	}
	.index_view > .index_view2 > .view > .icon {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.index_view > .index_view2 > .view > .icon > image {
		width: 100rpx;
		height: 100rpx;
	}
	.index_view > .index_view2 > .view > .index_data {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.index_view > .index_view2 > .view > .index_data > .number {
		display: block;
		font-size: 25rpx;
		padding-top: 10rpx;
	}
	.index_view > .index_view2 > .view > .index_data > .text {
		display: block;
		padding-top: 15rpx;
		font-size: 25rpx;
	}
	.index_view > .index_view2 > .view {
		float: left;
		display: block;
		width: 33.33%;
	}
	
	/* 倒计时 */
	.date_view {
		position: relative;
		top: -50rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		display: block;
		height: 330rpx;
	}
	.date_view > .title_view {
		padding: 40rpx 0rpx 40rpx 30rpx;
	}
	.date_view > .title_view > .icon {
		display: block;
		float: left;
		padding-right: 15rpx;
	}
	.date_view > .title_view > .title {
		display: block;
		color: #FFFFFF;
		font-weight: bold;
	}
	.date_view > .date_view2 {
		width: 95%;
		margin: auto;
	}
	.date_view > .date_view2 > .date {
		float: left;
		display: block;
		width: 25%;
	}
	.date_view > .date_view2 > .date > view {
		padding: 20rpx 0;
		border-radius: 10rpx;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
		background-color: #FECD64;
	}
	.date_view > .date_view2 > .date  > view > .text {
		text-align: center;
		color: #FFFFFF;
	}
	.date_view > .date_view2 > .date > view > .number {
		font-size: 50rpx;
		text-align: center;
		color: #FFFFFF;
	}
	
	/* 标题图标 */
	.image_icon {
		width: 50rpx;
		height: 50rpx;
	}
	/* 弹幕 */
	.barrage {
		position: fixed;
		right: 20rpx;
		top: 300rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 999;
	}
	/* 后台 */
	.admin {
		padding: 10rpx;
		z-index: 99;
		position: fixed;
		right: 5%;
		bottom: 20%;
		display: block;
		background-color: rgba(0,0,0,0.4);
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
	}
	/* 推荐 */
	.recom {
		padding: 10rpx;
		z-index: 99;
		position: fixed;
		right: 5%;
		bottom: 10%;
		display: block;
		background-color: rgba(0,0,0,0.4);
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
	}
	/* 分享 */
	.share {
		z-index: 9999;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0,0,0,0.6);
	}
	/* 音乐图标旋转特效 */
	.music {
		-webkit-animation-iteration-count: infinite;
		position: fixed;
		right: 20rpx;
		top: 200rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 999;
	}
	/* 旋转class */
	.rotate {
		animation: icon-rotate 4s linear infinite;
	}
	/* 旋转动画 */
	@keyframes icon-rotate {
		0% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(360deg);
		}
	}
	
	/* 表单输入框统一样式 */
	.form-input {
		border: 2rpx solid #ddd;
		padding: 0 20rpx;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		color: #333;
		transition: all 0.3s ease;
	}
	.form-input:focus,
	.form-input:active {
		border-color: #FB960E;
		background: #FFF9F0;
	}
	.picker {
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
	}
	.picker::after {
		content: '';
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #999;
	}
	
</style>
